```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome n8n Templates | 自动化工作流模板库</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            background-color: #f9fafb;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            margin-bottom: 1.5rem;
            color: white;
        }
        .flow-step {
            position: relative;
            padding-left: 2.5rem;
        }
        .flow-step:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 2px;
            height: 100%;
            background: #e5e7eb;
        }
        .flow-step:after {
            content: "";
            position: absolute;
            left: -8px;
            top: 0;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #6e8efb;
            border: 4px solid #e5e7eb;
        }
        .highlight-text {
            position: relative;
            display: inline-block;
        }
        .highlight-text:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background: rgba(110, 142, 251, 0.3);
            z-index: -1;
            transition: all 0.3s ease;
        }
        .highlight-text:hover:after {
            height: 50%;
        }
        .section-title {
            position: relative;
            padding-bottom: 1rem;
        }
        .section-title:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%);
            border-radius: 2px;
        }
        .mermaid {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 md:py-32 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                        <span class="highlight-text">Awesome n8n Templates</span><br>
                        解放生产力，让工作流自动化
                    </h1>
                    <p class="text-xl mb-8 opacity-90 leading-relaxed">
                        精心策划的n8n工作流模板集合，帮助您快速连接各种应用程序和服务，实现AI驱动的自动化工作流程。
                    </p>
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <a href="https://github.com/enescingoz/awesome-n8n-templates" class="bg-white text-purple-600 hover:bg-gray-100 font-semibold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center">
                            <i class="fab fa-github mr-2 text-lg"></i> GitHub 仓库
                        </a>
                        <a href="#features" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 font-semibold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center">
                            <i class="fas fa-rocket mr-2 text-lg"></i> 探索功能
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1755577191679-ba9ce8d2-0017-4421-a917-6b20205abe90.png" alt="n8n Workflow" class="rounded-xl shadow-2xl max-w-full h-auto border-4 border-white">
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 section-title inline-block">它能解决什么问题</h2>
                <p class="text-gray-600 max-w-3xl mx-auto text-lg">
                    在现代工作环境中，我们经常面临各类效率挑战，awesome-n8n-templates正是为解决这些问题而生。
                </p>
            </div>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">传统工作痛点</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-400 mt-1 mr-3"></i>
                            <span>多个应用程序之间手动传输数据，效率低下</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-400 mt-1 mr-3"></i>
                            <span>重复执行相同的任务流程，浪费人力资源</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-400 mt-1 mr-3"></i>
                            <span>缺乏统一的工作流管理工具，难以监控</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-400 mt-1 mr-3"></i>
                            <span>跨平台数据同步困难，容易出错</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-indigo-50 p-8 rounded-xl">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">我们的解决方案</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>提供即用型工作流模板，快速搭建复杂流程</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>无需从零编写代码或配置复杂集成方案</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>可视化界面操作，降低技术门槛</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>AI驱动，让自动化更加智能化</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-16 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 section-title inline-block">核心功能概述</h2>
                <p class="text-gray-600 max-w-3xl mx-auto text-lg">
                    强大而全面的功能集合，满足各类自动化需求
                </p>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 card-hover">
                    <div class="feature-icon bg-indigo-500">
                        <i class="fas fa-box-open text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">即用型模板库</h3>
                    <p class="text-gray-600">
                        提供数百个预配置的工作流模板，涵盖AI研究、邮件自动化、社交媒体管理等核心场景，用户只需导入即可使用。
                    </p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 card-hover">
                    <div class="feature-icon bg-purple-500">
                        <i class="fas fa-plug text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">多平台集成能力</h3>
                    <p class="text-gray-600">
                        支持与Gmail、Telegram、Google Drive、Slack等主流应用的深度集成，实现跨平台数据流转和任务自动化。
                    </p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 card-hover">
                    <div class="feature-icon bg-blue-500">
                        <i class="fas fa-brain text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">AI驱动的工作流</h3>
                    <p class="text-gray-600">
                        集成OpenAI、Claude等大语言模型，支持智能内容生成、数据分析、文档处理等AI增强功能。
                    </p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 card-hover">
                    <div class="feature-icon bg-green-500">
                        <i class="fas fa-sliders-h text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">可视化工作流设计</h3>
                    <p class="text-gray-600">
                        基于n8n的可视化界面，通过拖拽方式自定义和修改工作流，无需编程知识即可创建复杂流程。
                    </p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 card-hover">
                    <div class="feature-icon bg-yellow-500">
                        <i class="fas fa-users text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">社区驱动更新</h3>
                    <p class="text-gray-600">
                        持续更新的模板库，结合用户反馈和实际使用场景，确保模板的实用性和时效性。
                    </p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 card-hover">
                    <div class="feature-icon bg-red-500">
                        <i class="fas fa-infinity text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">无限扩展可能</h3>
                    <p class="text-gray-600">
                        支持自定义节点开发，可根据特定业务需求扩展功能，满足个性化自动化需求。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 section-title inline-block">典型使用场景</h2>
                <p class="text-gray-600 max-w-3xl mx-auto text-lg">
                    探索awesome-n8n-templates如何在不同场景中提升您的工作效率
                </p>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 text-indigo-600 rounded-lg p-3 mr-4">
                            <i class="fas fa-pencil-alt text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">内容创作自动化</h3>
                    </div>
                    <p class="text-gray-600 mb-4">
                        当在Notion中创建新文章大纲时，自动触发AI生成相关内容，然后将生成的内容发送到社交媒体平台，同时更新内容日历。
                    </p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full">Notion</span>
                        <span class="bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full">OpenAI</span>
                        <span class="bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full">Twitter</span>
                    </div>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-purple-100 text-purple-600 rounded-lg p-3 mr-4">
                            <i class="fas fa-users text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">客户关系管理优化</h3>
                    </div>
                    <p class="text-gray-600 mb-4">
                        当新客户填写网站表单时，自动创建CRM记录，发送欢迎邮件，安排后续跟进任务，并在Slack中通知相关销售人员。
                    </p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-purple-100 text-purple-700 text-sm px-3 py-1 rounded-full">CRM</span>
                        <span class="bg-purple-100 text-purple-700 text-sm px-3 py-1 rounded-full">Gmail</span>
                        <span class="bg-purple-100 text-purple-700 text-sm px-3 py-1 rounded-full">Slack</span>
                    </div>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 text-blue-600 rounded-lg p-3 mr-4">
                            <i class="fas fa-chart-line text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">数据分析和报告生成</h3>
                    </div>
                    <p class="text-gray-600 mb-4">
                        从多个数据源收集信息，使用AI进行分析和总结，生成可视化报告，并通过邮件或Slack自动分发给相关团队成员。
                    </p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-blue-100 text-blue-700 text-sm px-3 py-1 rounded-full">Google Sheets</span>
                        <span class="bg-blue-100 text-blue-700 text-sm px-3 py-1 rounded-full">Data Analysis</span>
                        <span class="bg-blue-100 text-blue-700 text-sm px-3 py-1 rounded-full">Automation</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 bg-indigo-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 section-title inline-block">独特优势</h2>
                <p class="text-gray-600 max-w-3xl mx-auto text-lg">
                    相比其他自动化工具，awesome-n8n-templates具有以下独特优势
                </p>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <i class="fas fa-lock-open text-4xl text-indigo-500 mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">开源免费</h3>
                    <p class="text-gray-600">完全开源，用户可以自由使用、修改和分发，不存在商业限制和隐藏费用。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <i class="fas fa-award text-4xl text-purple-500 mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">模板质量高</h3>
                    <p class="text-gray-600">每个模板都经过精心设计和测试，确保在实际工作环境中的可用性和稳定性。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <i class="fas fa-users text-4xl text-blue-500 mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">社区活跃</h3>
                    <p class="text-gray-600">拥有9.3k星标和2.7k分支，活跃的社区支持确保问题能够快速得到解决。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <i class="fas fa-sync-alt text-4xl text-green-500 mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">持续更新</h3>
                    <p class="text-gray-600">定期添加新模板和功能，跟上技术发展和用户需求变化。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Flow Diagram Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 section-title inline-block">工作流可视化</h2>
                <p class="text-gray-600 max-w-3xl mx-auto text-lg">
                    典型自动化工作流程示例：内容创作与分发流程
                </p>
            </div>
            <div class="mermaid">
                graph LR
                    A[Notion新文章大纲] --> B(AI内容生成)
                    B --> C[内容优化]
                    C --> D{平台分发}
                    D --> E[Twitter]
                    D --> F[LinkedIn]
                    D --> G[微信公众号]
                    C --> H[内容日历更新]
                    H --> I[Google日历]
                    H --> J[Notion日历]
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 section-title inline-block">上手指南</h2>
                <p class="text-gray-600 max-w-3xl mx-auto text-lg">
                    只需简单几步，即可开始使用awesome-n8n-templates提升您的工作效率
                </p>
            </div>
            <div class="max-w-3xl mx-auto">
                <div class="flow-step mb-10 pl-8">
                    <h3 class="text-2xl font-semibold mb-4">第一步：环境准备</h3>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <span class="bg-indigo-100 text-indigo-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                            <span>安装n8n（支持Docker、npm或二进制安装）</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-indigo-100 text-indigo-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                            <span>确保有稳定的网络连接，因为需要访问各种第三方服务</span>
                        </li>
                    </ul>
                </div>
                <div class="flow-step mb-10 pl-8">
                    <h3 class="text-2xl font-semibold mb-4">第二步：选择模板</h3>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <span class="bg-purple-100 text-purple-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                            <span>浏览GitHub仓库中的模板分类</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-purple-100 text-purple-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                            <span>根据业务需求选择合适的模板</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-purple-100 text-purple-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                            <span>下载对应的JSON文件</span>
                        </li>
                    </ul>
                </div>
                <div class="flow-step mb-10 pl-8">
                    <h3 class="text-2xl font-semibold mb-4">第三步：导入和配置</h3>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                            <span>在n8n中创建新工作流</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                            <span>导入下载的模板文件</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                            <span>配置必要的API密钥和连接信息</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">4</span>
                            <span>测试工作流是否正常运行</span>
                        </li>
                    </ul>
                </div>
                <div class="flow-step pl-8">
                    <h3 class="text-2xl font-semibold mb-4">第四步：自定义和优化</h3>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <span class="bg-green-100 text-green-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                            <span>根据实际需求调整工作流参数</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-green-100 text-green-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                            <span>添加或删除节点</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-green-100 text-green-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                            <span>设置触发条件和执行频率</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-green-100 text-green-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">4</span>
                            <span>进行充分测试后部署到生产环境</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
        <div class="container mx-auto max-w-6xl px-4 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">准备好提升您的工作效率了吗？</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
                立即访问awesome-n8n-templates，开始您的自动化之旅
            </p>
            <a href="https://github.com/enescingoz/awesome-n8n-templates" class="inline-block bg-white text-indigo-600 hover:bg-gray-100 font-semibold py-4 px-8 rounded-lg transition duration-300 text-lg shadow-lg">
                <i class="fab fa-github mr-2"></i> 访问GitHub仓库
            </a>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```